<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-定时器案例</title>
</head>
<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        /* 
            需求：
            1. 点击开始按钮，启动定时器
            2. 点击停止按钮，停止定时器
               全局作用域不能访问局部作用域
        */ 
       var begin = document.querySelector('.begin');
       var stop = document.querySelector('.stop');

       var timer = null;  // 全局
       begin.addEventListener('click',function(){
           console.log('开启定时器');
           timer = setInterval(()=>{
               console.log('开始增加数数');
           },1000);
       });

       stop.addEventListener('click',() =>{
           console.log('停止定时器');
           clearInterval(timer);
       });
    </script>
</body>
</html>